<template>
	<div>
		<div class="box" ref="header">
			<span class="iconfont icon-liebiao" @click="fenlei"></span>
			<van-search placeholder="雅诗兰黛" v-model="value" shape="round" @click="search" />
			<span class="iconfont icon-daipingjia" @click="tongzhi"></span>
		</div>

		<van-tabs v-model="active" sticky :offset-top='top'>
			<van-tab title="热卖推荐">
				<van-swipe :autoplay="3000" indicator-color="white" :loop="true">
					<van-swipe-item>
						<img src="../assets/lb2.jpg" @click="fashion" />
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/lb3.jpg" @click="fashion" />
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/lb4.jpg" @click="fashion" />
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/lb3.jpg" @click="fashion" />
					</van-swipe-item>
				</van-swipe>

				<van-grid :border="false" :column-num="4" class="xt">
					<van-grid-item>
						<img src="../assets/jg.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg2.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg3.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg4.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg5.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg6.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg7.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/jg8.jpg" @click="fashion" />
					</van-grid-item>
				</van-grid>

				<div class="xr">
					<img src="../assets/lb.jpg" @click="fashion" />
				</div>

				<van-grid :border="false" :column-num="2" square class="zj">
					<van-grid-item>
						<img src="../assets/sj.jpg" @click="fashion" />
					</van-grid-item>
					<van-grid-item>
						<img src="../assets/sp.jpg" @click="fashion" />
					</van-grid-item>
				</van-grid>


				<!-- <van-grid :column-num="2" :icon-size="100">
				   <van-grid-item
				     v-for="item in list"
				     :key="item"
				     :icon="item.pimg"
				     :text="item.pdesc"
					 @click="tap(item.pid)"
				   />
				 </van-grid> -->

				<van-grid :border="false" :column-num="2">
					<van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<!-- <p>{{item.name}}</p> -->
							<p class="name">{{item.name}}</p>
							<p class="price"> ￥ {{item.price}}</p>
							<van-icon name="shopping-cart-o" @click.stop="add(item._id)" />
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>

			<van-tab title="精选护肤" class="xihuan">
				<van-grid :border="false" :column-num="1">
					<van-grid-item :gutter="10" v-for="item in list1" @click="tap(item._id)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price">{{item.descriptions}}</p>
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
			
			<van-tab title="奢品专区" class="xihuan">
				<van-grid :border="false" :column-num="1">
					<van-grid-item :gutter="10" v-for="item in list1" @click="tap(item._id)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price">{{item.descriptions}}</p>
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
			
			<van-tab title="玩转妆容" class="xihuan">
				<van-grid :border="false" :column-num="1">
					<van-grid-item :gutter="10" v-for="item in list1" @click="tap(item._id)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price">{{item.descriptions}}</p>
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
		</van-tabs>
	</div>


</template>

<script>
	import * as api from '../api/getProlist'
	export default {
		name: "Home",
		data() {
			return {
				title: "首页",
				active: 0,
				value: '',
				list: [],
				list1: [],
				top:40,
				scrollY:''
			}
		},
		created() {
			
		},
		mounted() {
			this.$emit('toparent', this.title)
			window.addEventListener('scroll', this.scrollToTop)
			// console.log(this.$refs.header.offsetHeight)
			// this.top=this.$refs.header.offsetHeight-1
			api.getProlist({
				per: 50,
				page: 1,
				name: '朵色',
				product_category: [],
			}).then((data) => {
				this.list = data.data.products
				this.list1 = data.data.products
			})
		},
		destroyed () {
		  window.removeEventListener('scroll', this.scrollToTop)
		},
		methods: {
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			  backTop () {
			    const that = this
			    let timer = setInterval(() => {
			      let ispeed = Math.floor(-that.scrollTop / 5)
			      document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
			      if (that.scrollTop === 0) {
			        clearInterval(timer)
			      }
			    }, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			  scrollToTop () {
			    const that = this
			    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			    that.scrollTop = scrollTop
			    if (that.scrollTop > 200) {
			      that.scrollY = true
			    } else {
			      that.scrollY = false
			    }
			  },
			tap(id) {
				console.log(id)
				this.$router.push('/detail/' + id)
			},
			fenlei() {
				this.$router.push({
					path: '/fenlei',
					query: {
						id: '1'
					}
				})
			},
			fashion() {
				this.$router.push('/fashion')
			},
			tongzhi() {
				this.$router.push('/tongzhi')
			},
			search() {
				this.$router.push({
					path: '/fenlei',
					query: {
						id: '0'
					}
				})
			},
			add(id) {
				console.log(id)
				if(!localStorage.getItem('token')){
					this.$toast('请先登录')
					this.$router.push('/login')
				}else{
					api.getAddcart({
						product: id,
						quantity: 1,
					}).then((data) => {
						console.log(data)
						console.log(id)
						this.$toast('加入购物车成功')
					})
				}
			}
		},
		// watch:{
		// 	top:function(){
		// 		console.log(this.top)
		// 	}
		// }
	}
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 50px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}
	.van-swipe-item img {
		width: 304px;
		height: 146px;
		margin: 40px auto 0;
		display: block;
	}

	.box {
		display: flex;
		justify-content: space-around;
		height: 40px;
		width: 100%;
		line-height: 40px;
		border-bottom: 1px solid #efefef;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background: #fff;
	}

	.icon-liebiao {
		font-size: 16px;
		margin-left: 13px;
	}

	.icon-daipingjia {
		font-size: 18px;
		margin-right: 13px;
	}

	.van-search__content {
		width: 238px;
		height: 25px;
	}

	.xr {
		width: 304px;
		height: 120px;
		margin: 0 auto;
	}

	.xr img {
		width: 304px;
		height: 120px;
	}

	.xt .van-grid-item__content--center {
		width: 45px;
		height: 45px;
	}

	.xt .van-grid-item__content img {
		width: 45;
		height: 45px;
	}

	.zj .van-grid-item__content--center {
		width: 150px;
		height: 154px;
	}

	.zj .van-grid-item__content img {
		width: 150px;
		height: 154px;
	}

	.van-card {
		width: 90px;
		height: 140px;
		padding: 0;
	}

	/* .van-image__error .van-image__img, .van-image__loading{width: 88px;height: 90px;} */
	.van-image {
		width: 88px;
		height: 90px;
	}

	.van-image_img {
		width: 88px;
		height: 90px;
	}

	.list1 {
		width: 100%;
		margin: 0 auto 10px;
		height: 223px;
		/* box-shadow: 1px 8px 10px 3px #ddd; */
	}

	.xihuan {
		margin-top: 40px;
	}

	.van-card__thumb {
		width: 300px;
		height: 150px;
		padding: 0 10px;
	}

	.van-card__header {
		display: flex;
		flex-direction: column;
	}

	.van-card__title {
		margin: 25px 0 0 10px;
		font-size: 17px;
		width: 310px;
		text-align: center;
	}

	.van-card__desc {
		margin: 7px 0 0 10px;
		font-size: 11px;
		color: #666;
		width: 310px;
		text-align: center;
	}

	.van-card__content {
		width: 200px;
		height: 100px;
	}

	.van-icon {
		font-size: 16px;
		width: 24px;
		height: 24px;
		border: 1px solid #d5616e;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		background: #d5616e;
		color: #efd1d1;
		position: absolute;
		right: 13px;
		bottom: 20px;
	}

	.price {
		color: #d88694;
		font-size: 12px;
	}

	.name {
		width: 130px;
	}

	.sp {
		border-right: 2px solid #f9f9f9;
		border-bottom: 2px solid #f9f9f9;
	}

	.sp:nth-of-type(even) {
		border-right: 0;
	}

	.van-card__title{
		font-size: 14px;
		margin-top: 10px;
	}
	
	 .xihuan .price {
	    color: #666;
	    width: 280px;
	    font-size: 12px;
	    text-align: center;
	    margin: 0;
	  }
	
	  .xihuan .name {
	    width: 280px;
	    font-size: 13px;
	    height: 38px;
	    line-height: 38px;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
		text-align: center;
	  }
	
	  .xihuan .sp {
	    border-right: 2px solid #f9f9f9;
	    border-bottom: 2px solid #f9f9f9;
	  }
	  .xihuan .sp:nth-of-type(even){
	    border-right: 0;
	  }
	  .xihuan .van-image {
	    width: 280px;
	    height: 180px;
	  }
</style>
